<template>
  <div>
    <b-carousel label-next="" label-prev="" id="carousel-no-animation" style="text-shadow: 0px 0px 2px #000" fade controls :indicators="true" img-width="1024" img-height="400">
      <b-carousel-slide img-height="400" caption="First slide" img-src="https://picsum.photos/1024/480/?image=10"></b-carousel-slide>
      <b-carousel-slide img-height="400" caption="Second Slide" img-src="https://picsum.photos/1024/480/?image=12"></b-carousel-slide>
      <b-carousel-slide img-height="400" caption="Third Slide" img-src="https://picsum.photos/1024/480/?image=22"></b-carousel-slide>
      <b-carousel-slide img-height="400" caption="Fourth Slide" img-src="https://picsum.photos/1024/480/?image=23"></b-carousel-slide>
    </b-carousel>
    <b-card>
      <b-skeleton animation="throb" width="85%"></b-skeleton>
      <b-skeleton animation="throb" width="55%"></b-skeleton>
      <b-skeleton animation="throb" width="70%"></b-skeleton>
    </b-card>
    <b-card no-body>
      <b-tabs card>
        <b-tab no-body title="Picture 1">
          <b-card-img bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21"></b-card-img>
          <b-card-footer>Picture 1 footer</b-card-footer>
        </b-tab>

        <b-tab no-body title="Picture 2">
          <b-card-img bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25"></b-card-img>
          <b-card-footer>Picture 2 footer</b-card-footer>
        </b-tab>

        <b-tab no-body title="Picture 3">
          <b-card-img bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26"></b-card-img>
          <b-card-footer>Picture 3 footer</b-card-footer>
        </b-tab>

        <b-tab title="Text">
          <b-card-title>This tab does not have the <code>no-body</code> prop set</b-card-title>
          <b-card-text>
            Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit
            voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure.
          </b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>

<script>
export default {
  methods: {
    prev() {
      this.$refs.myCarousel.prev();
    },
    next() {
      this.$refs.myCarousel.next();
    },
  },
};
</script>
